<template>
  <div class="app" id="bu101">
    <merchantHeader />
    <div class="back">
      <div class="con">
        <div class="pxes"></div>
        <div class="listneo">
          <businessL />
          <div class="datare">
            <div class="ra">账户信息</div>
            <div class="toxian">
              <div class="gerrn">
                <el-form :label-position="labelPosition" label-width="100px" size="small">
                  <h5>基本资料</h5>
                  <div class="item_bock head_p">
                    <div class="head_img">
                      <img :src="userImage" />
                    </div>
                    <div class="setting_right" @click.stop="uploadHeadImg">
                      <div class="caption">更改头像</div>
                    </div>
                    <input type="file" accept="image/*" @change="handleFile" class="hiddenInput" />
                  </div>

                  <el-form-item label="商家名称">
                    <el-col :span="11">
                      <el-input v-model="bussname"></el-input>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="经营类目">
                    <el-col :span="11">
                      <el-select v-model="types" style="width:100%" placeholder="请选择经营类目">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="绑定手机号">
                    <el-col :span="8">{{phones}}</el-col>
                    <el-col :span="5" :offset="1">
                      <span @click="dialogVisible = true" style="color:blue">修改</span>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="登录密码">
                    <el-col :span="8">{{password}}</el-col>
                    <el-col :span="5" :offset="1">
                      <span @click="dialogVisiblePassword = true" style="color:blue">修改</span>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="店铺照片">
                    <img
                      style="width:100px;height:100px;margin-top: 10px;"
                      src="@/assets/img/aa.png"
                      alt
                    />
                    <img
                      style="width:100px;height:100px;margin-top: 10px;"
                      src="@/assets/img/aa.png"
                      alt
                    />
                  </el-form-item>
                  <h5 style="margin-bottom:5px">经营信息</h5>
                  <el-form-item label="经营地址">
                    <el-col :span="11">
                      <el-input v-model="address"></el-input>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="合作厂家">
                    <el-col :span="11">
                      <el-input v-model="cooperation"></el-input>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="厂家地址">
                    <el-col :span="11">
                      <el-input v-model="manufacturers"></el-input>
                    </el-col>
                  </el-form-item>
                </el-form>
                <el-button type="danger" style="display:block;margin:10px auto">保存</el-button>
              </div>
            </div>
            <businessF />
          </div>
        </div>
      </div>
      <el-dialog :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
        <div class="lheds">修改绑定手机</div>
        <div class="lbody">
          <el-form :label-position="labelPosition" label-width="80px" size="small">
            <el-form-item label="绑定手机">
              <el-row>
                <el-col :span="13">{{phones}}</el-col>
                <el-col :span="8">
                  <el-button>获取验证码</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="验证码">
              <el-input style="width:250px" v-model="code"></el-input>
            </el-form-item>
            <el-form-item label="新手机号">
              <el-row>
                <el-col :span="13">
                  <el-input v-model="newPhone"></el-input>
                </el-col>
                <el-col :span="8">
                  <el-button>获取验证码</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="验证码">
              <el-input style="width:250px" v-model="newCode"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-button
          style="margin: 0 auto;display: block;"
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
        <div style="height:15px"></div>
      </el-dialog>
      <el-dialog :visible.sync="dialogVisiblePassword" width="600px" :before-close="handleClose">
        <div class="lheds">修改密码</div>
        <div class="lbody">
          <el-form :label-position="labelPosition" label-width="80px" size="small">
            <el-form-item label="原密码">
              <el-input style="width:250px" type="password" v-model="oldPassword"></el-input>
            </el-form-item>
            <el-form-item label="新密码">
              <el-input style="width:250px" type="password" v-model="newPassword"></el-input>
            </el-form-item>
            <el-form-item label="确定密码">
              <el-input style="width:250px" type="password" v-model="againPassword"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-button
          style="margin: 0 auto;display: block;"
          type="primary"
          @click="dialogVisiblePassword = false"
        >确 定</el-button>
        <div style="height:15px"></div>
      </el-dialog>
    </div>
    <Footer />
  </div>
</template>
<script>
import merchantHeader from "@/components/merchantHeader";
import Footer from "@/components/Footer";
import businessF from "@/components/businessF";
import businessL from "@/components/businessL";
export default {
  components: {
    merchantHeader,
    Footer,
    businessF,
    businessL
  },
  data() {
    return {
      userImage:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      dialogVisible: false,
      dialogVisiblePassword: false,
      labelPosition: "right",
      bussname: "",
      types: "",
      phones: 15072967720,
      password: "********",
      address: "",
      cooperation: "",
      manufacturers: "",
      code: "",
      newPhone: "",
      newCode: "",
      oldPassword: "",
      newPassword: "",
      againPassword: ""
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 打开图片上传
    uploadHeadImg: function () {
      this.$el.querySelector('.hiddenInput').click()
    },
    // 将头像显示
    handleFile: function (e) {
      let $target = e.target || e.srcElement
      let file = $target.files[0]
      var reader = new FileReader()
      reader.onload = (data) => {
        let res = data.target || data.srcElement
        this.userImage = res.result
      }
      reader.readAsDataURL(file)
    },
  }
};
</script>
<style lang="stylus">
#bu101 {
  .datare /deep/ .el-tabs__nav {
    margin-left: 60px;
  }

  .datare /deep/ .el-tabs__item.is-active {
    color: #f06048;
  }

  .datare /deep/ .el-tabs__active-bar {
    color: #f06048;
  }

  .datare /deep/ .el-tabs__item:hover {
    color: #f06048;
  }

  .datare /deep/ .el-tabs__active-bar {
    background-color: #f06048;
  }

  .app /deep/ .ist_l .ist_c li:nth-child(1) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
  }

  .datale .router-link-exact-active {
    color: #ff9381;
  }

  .datale a:hover {
    color: #ff9381;
  }

  .datale {
    /* width: 216px; */
    background-color: #ffffff;
    border-radius: 6px;
    /* height: 200px; */
  }

  .borebon {
    border-bottom: 12px solid #eee;
  }

  .borebon ul {
    display: inline-block;
    margin-left: 20px;
  }

  .borebon ul span {
    font-size: 24px;
    font-weight: 550;
    font-stretch: normal;
    line-height: 32px;
    letter-spacing: 0px;
    color: #313131;
    display: block;
    margin-top: 10px;
    margin-bottom: 15px;
  }

  .borebon ul li {
    width: 146px;
    line-height: 34px;
    font-size: 15px;
  }

  .ontoi .datale .sonh_g li {
    width: 120px;
  }

  .flex_lr {
    display: flex;
    justify-content: space-between;
  }

  .box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .back {
    background-color: #f06048;
  }

  .pxes {
    height: 15px;
  }

  .back .con {
    width: 1200px;
    margin: 0 auto;
    background-color: #eee;
  }

  .listneo {
    width: 1161px;
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
  }

  .datare {
    width: 902px;
    border-radius: 6px;
    background-color: #fff;
  }

  .datare .ra {
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 43px;
    margin-left: 14px;
    position: relative;
    top: 15px;
    width: 192px;
    height: 43px;
    background-color: #f06048;
    box-shadow: 0px 4px 2px 0px rgba(70, 23, 15, 0.38);
    border-radius: 0px 0px 20px 20px;
  }

  .toxian {
    margin-top: 23px;
  }

  .gerrn {
    width: 810px;
    margin: 0 auto;
  }
  /* L */
  .l101 {
    width: 100%;
    display: flex;
  }

  .l101b {
    width: 50%;
  }

  .l101b_img {
    width: 178px;
    height: 178px;
    background-color: rgb(220, 220, 220);
    line-height: 178px;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 10px;
    color: rgb;
    color: rgb(178, 178, 178);
  }

  .l101b_tx {
    display: flex;
    justify-content: space-around;
  }

  .l101b_tx_x {
    width: 40%;
  }

  .l101b_tx_x1 {
    width: 100px;
    height: 100px;
    background-color: rgb(220, 220, 220);
    margin: 40px auto;
  }

  h5 {
    width: 150px;
    font-size: 17px;
    padding: 5px 0px;
    border-bottom: solid 2px rgb(220, 220, 220);
  }

  .el-dialog__header {
    padding: 0px !important;
  }

  .el-dialog__body {
    padding: 0px !important;
  }

  .lheds {
    width: 100%;
    height: 60px;
    background-color: rgb(240, 96, 72);
    color: white;
    text-align: center;
    line-height: 60px;
    font-size: 24px;
  }

  .lbody {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }


  .item_bock {
  display: flex;
  align-items: center;
  height:94px;
  width: 300px;
  padding:0px 24px 0px 38px;
  border-bottom: 1px solid #f7f7f7;
  background: #fff;
}
.head_p {
  height:132px;
}
.head_img{
  height: 90px;
}
.head_img img{
  width:90px;
  height:90px;
  border-radius:50px
}
.setting_right{
  display: flex;
  height: 37px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 60px;
    margin-left: 20px;
}
.hiddenInput{
  display: none;
}
.caption {
  color: blue;
  font-size: 16px;
  height: 37px;
}
}
</style>